<template>
  <div>
    <!-- 顶部信息 -->
    <div class="topInfo">
      <el-image
        style="width: 200px; height: 200px"
        :src="songerInfo.imgUrl"
        fit="fill"
      ></el-image>

      <div class="personalInfo">
        <div class="name">{{ songerInfo.name }}</div>
        <div class="EnglishName"><!-- Joker Xue -->&#8194;</div>
        <div class="btn">
          <el-button round v-remove-focus>
            <i class="el-icon-folder-add"></i> 收藏
          </el-button>
          <el-button
            round
            v-remove-focus
            v-show="songerInfo.userId"
            @click="toUserDetailPage"
          >
            <i class="el-icon-user"></i> 个人主页
          </el-button>
        </div>
        <div class="count">
          <span>单曲数:{{ songerInfo.musicSize }}</span>
          <span>专辑数:{{ songerInfo.albumSize }}</span>
          <span>MV数:{{ songerInfo.videoCount }}</span>
        </div>
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="headerBar_navmenu">
      <el-menu :default-active="active" mode="horizontal" ref="menu">
        <el-menu-item index="1" @click="isShow = 'album'">专辑</el-menu-item>
        <el-menu-item index="2" @click="isShow = 'MV'">MV</el-menu-item>
        <el-menu-item index="3" @click="isShow = 'desc'">歌手详情</el-menu-item>
        <el-menu-item index="4" @click="isShow = 'like'">相似歌手</el-menu-item>
      </el-menu>
    </div>

    <!-- 歌手热门50首歌曲 -->
    <div class="album" v-show="isShow == 'album'">
      <!-- 左侧大图 -->
      <div class="top50">
        <div>TOP</div>
        <div class="num">50</div>
      </div>

      <!-- 右侧歌单 -->
      <div class="musiclist">
        <div class="title">
          热门50首
          <i class="el-icon-video-play"> </i>
          <i class="el-icon-folder-add"></i>
        </div>
        <ol ref="top50" class="hot50">
          <li
            v-for="(top, key) in top50"
            :key="key"
            @dblclick="playSong(top, top50)"
          >
            <div>
              <span class="index">{{ top.index | indexTimeFilter }}</span>
              <i class="el-icon-coffee"></i>
              <i class="el-icon-download"></i>
              <span class="name">{{ top.name }}</span>
            </div>
            <div class="time">
              {{ top.time | songTimeFilter }}
            </div>
          </li>
        </ol>
        <div class="check" @click="checkAllSongs" v-if="!checkAll">
          查看全部50首 <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
    <!-- 专辑 -->
    <div
      class="album"
      v-show="isShow == 'album'"
      v-for="(album, key) in songerAlbum"
      :key="key"
    >
      <!-- 左侧大图 -->
      <div class="image">
        <el-image
          style="width: 160px; height: 160px"
          :src="album.picUrl"
          fit="fill"
        ></el-image>
        <div class="publishTime">{{ album.publishTime | dateTimeFilter }}</div>
      </div>

      <!-- 右侧歌单 -->
      <div class="musiclist">
        <div class="title">
          {{ album.name }}
          <i class="el-icon-video-play"> </i>
          <i class="el-icon-folder-add"></i>
        </div>
        <ol>
          <li
            v-for="(song, key2) in album.albumSong"
            :key="key2"
            @dblclick="playSong(song, album.albumSong)"
          >
            <div>
              <span class="index">{{ song.index | indexTimeFilter }}</span>
              <i class="el-icon-coffee"></i>
              <i class="el-icon-download"></i>
              <span class="name">{{ song.name }}</span>
            </div>
            <div class="time">
              {{ song.time | songTimeFilter }}
            </div>
          </li>
        </ol>
      </div>
    </div>

    <!-- MV -->
    <div class="MV" v-show="isShow == 'MV'">MV</div>

    <!-- 歌手详情 -->
    <div class="desc" v-show="isShow == 'desc'">
      <div v-for="(desc, key) in songerDesc" :key="key">
        <h4>{{ desc.title }}</h4>
        <p>
          {{ desc.txt }}
        </p>
      </div>
    </div>

    <!-- 相似歌手 -->
    <div class="like" v-show="isShow == 'like'">
      <div v-for="(songer, key) in songerLike" :key="key">
        <el-image
          @click="toSongerDetailPage(songer.id)"
          style="width: 160px; height: 160px"
          :src="songer.picUrl"
          fit="fill"
        ></el-image>

        <div class="name" @click="toSongerDetailPage(songer.id)">
          {{ songer.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 歌手信息
      songerInfo: {
        // 名称
        name: '',
        // 用户id
        userId: '',
        // 图片
        imgUrl: '',
        // 专辑数
        albumSize: '',
        // 单曲数
        musicSize: '',
        // Mv数
        videoCount: '',
      },
      //  导航栏高亮
      active: '1',
      // 歌手热门前50首歌曲
      top50: [],
      // 查看歌手全部热门50首歌曲
      checkAll: false,
      // 具体显示的部分
      isShow: 'album',
      // 歌手专辑
      songerAlbum: [],
      // 歌手描述
      songerDesc: [],
      // 相似歌手
      songerLike: [],
    }
  },
  computed: {
    ...mapState(['songerId']),
  },
  created() {
    this.routerIsActiveInfo()
    this.getSongerDetail()
    this.getSongerAlbum()
    this.getArtistTop()
    this.getSongerDesc()
    this.getLikeSonger()
  },
  watch: {
    songerId: function (newVal, oldVal) {
      this.getSongerDetail()
      this.getSongerAlbum()
      this.getArtistTop()
      this.getSongerDesc()
      this.getLikeSonger()
    },
  },
  filters: {
    // 歌曲时间过滤器
    songTimeFilter: function (val) {
      const dt = new Date(val)
      // 分秒
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')

      return `${mm}:${ss}`
    },
    // 日期时间过滤器
    dateTimeFilter: function (val) {
      const dt = new Date(val)

      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      return `${y}-${m}-${d}`
    },
    // 序号过滤器
    indexTimeFilter: function (val) {
      let index = val + 1
      index = (index + '').padStart(2, '0')
      return index
    },
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeIsActive',
      'changeIsMyself',
      'changeSongerId',
      'changeMusicPlayInfo',
      'changeTheDetailUserId',
    ]),

    // 侧边栏信息
    routerIsActiveInfo() {
      const isActive = ''
      this.changeIsActive(isActive)
    },
    //  获取歌手详情
    async getSongerDetail() {
      const { data: res } = await this.$http({
        url: `/artist/detail?id=${this.songerId} `,

        withCredentials: true, //关键
      })
      // console.log(res)

      this.songerInfo.name = res.data.artist.name
      this.songerInfo.imgUrl = res.data.artist.cover
      this.songerInfo.albumSize = res.data.artist.albumSize
      this.songerInfo.musicSize = res.data.artist.musicSize
      this.songerInfo.videoCount = res.data.videoCount

      if (res.data.user) {
        this.songerInfo.userId = res.data.user.userId
      }
    },
    // 获取歌手热门50首歌曲
    async getArtistTop() {
      const { data: res } = await this.$http({
        url: `/artist/top/song?id=${this.songerId}`,
        withCredentials: true, //关键
      })
      // console.log(res)

      let tempListDatas = []
      let index = 0
      res.songs.map((item) => {
        let listObj = {}

        /**
         * 音乐id id
         * 音乐时长 time
         * 音乐名称 name
         * 音乐专辑名称 album
         * 音乐图片 picUrl
         * 音乐艺术家名称 artistname
         */
        listObj.id = item.id
        listObj.time = item.dt
        listObj.name = item.name
        listObj.album = item.al.name
        listObj.picUrl = item.al.picUrl

        let str = ''
        for (let i = 0; i < item.ar.length; i++) {
          str = str + item.ar[i].name
          if (i != item.ar.length - 1) {
            str = str + '/'
          }
        }
        listObj.artistname = str

        listObj.index = index
        index++
        return tempListDatas.push(listObj)
      })

      this.top50 = tempListDatas
    },
    // 获取歌手专辑
    async getSongerAlbum() {
      const { data: res } = await this.$http({
        url: `/artist/album?id=${this.songerId}&limit=10`,
        withCredentials: true, //关键
      })
      // console.log(res)
      let tempListDatas = []

      res.hotAlbums.map(async (item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.picUrl = item.picUrl
        listObj.publishTime = item.publishTime

        // 获取专辑歌曲数据
        listObj.albumSong = []
        const { data: res2 } = await this.$http({
          url: `/album?id=${listObj.id}`,
          withCredentials: true, //关键
        })
        // console.log(res2)

        // 提取专辑中的歌曲信息
        let index = 0
        res2.songs.map((song) => {
          let songs = {}

          songs.id = song.id
          songs.time = song.dt
          songs.name = song.name
          songs.album = song.al.name
          songs.picUrl = song.al.picUrl

          let str = ''
          for (let i = 0; i < song.ar.length; i++) {
            str = str + song.ar[i].name
            if (i != song.ar.length - 1) {
              str = str + '/'
            }
          }
          songs.artistname = str

          songs.index = index
          index++
          return listObj.albumSong.push(songs)
        })

        return tempListDatas.push(listObj)
      })

      this.songerAlbum = tempListDatas
      // console.log(this.songerAlbum)
    },
    // 获取歌手描述
    async getSongerDesc() {
      const { data: res } = await this.$http({
        url: `/artist/desc?id=${this.songerId}`,
        withCredentials: true, //关键
      })
      // console.log(res)

      let tempListDatas = []
      res.introduction.map((item) => {
        let listObj = {}

        listObj.title = item.ti
        listObj.txt = item.txt

        return tempListDatas.push(listObj)
      })
      this.songerDesc = tempListDatas
    },
    // 获取相似歌手
    async getLikeSonger() {
      const { data: res } = await this.$http({
        url: `/simi/artist?id=${this.songerId}`,
        withCredentials: true, //关键
      })
      // console.log(res)

      // let tempListDatas = []
      // res.artists.map((item) => {
      //   let listObj = {}

      //   listObj.id = item.id
      //   listObj.name = item.name
      //   listObj.picUrl = item.picUrl
      //   listObj.accountId = item.accountId

      //   return tempListDatas.push(listObj)
      // })
      // this.songerLike = tempListDatas

      this.songerLike = res.artists
    },
    // 跳转到个人信息页面
    toUserDetailPage() {
      const info = {
        path: '/view/userdetail',
        isMyself: this.userId == this.songerInfo.userId,
        theDetailUserId: this.songerInfo.userId,
      }
      this.changePath(info.path)
      this.changeIsMyself(info.isMyself)
      this.changeTheDetailUserId(info.theDetailUserId)

      this.$emit('getUserDetailInfo', info)
    },
    // 查看歌手全部热门50首歌曲
    checkAllSongs() {
      this.$refs.top50.style.height = 32.8 * 50 + 'px'
      this.checkAll = true
    },
    // 播放歌曲
    playSong(row, list) {
      let thePlaySongInfo = row
      let thePlaySongListInfo = list

      const info = {
        thePlaySongInfo,
        thePlaySongListInfo,
      }

      this.changeMusicPlayInfo(info)
    },
    // 跳转到歌手详情页面
    toSongerDetailPage(songerId) {
      const info = {
        path: '/view/songerdetail',
        songerId: songerId,
      }

      this.changePath(info.path)
      this.changeSongerId(info.songerId)
      this.$emit('getSongerDetailInfo', info)
    },
  },
}
</script>

<style lang="less" scoped>
.topInfo {
  display: flex;
  padding-top: 30px;

  > .el-image {
    margin-left: 26px;
    border-radius: 12px;
  }
  > .personalInfo {
    margin-left: 24px;
    > .name {
      font-size: 23px;
      font-weight: bold;
    }
    > .EnglishName {
      padding: 8px 0;
      font-size: 14px;
      color: #373737;
    }
    > .btn {
      .el-button {
        padding: 7px 16px;
        font-size: 16px;
        color: #373737;
        i {
          font-size: 18px;
          position: relative;
          top: 1px;
        }
      }

      /deep/ .el-button:hover {
        background-color: #f2f2f2;
        color: black;
        border: 1px solid #e5e5e5;
      }
      /deep/ .el-button:focus {
        background-color: white;
        color: black;
        border: 1px solid #e5e5e5;
      }
    }
    > .count {
      padding-top: 14px;
      span {
        color: #373737;
        font-size: 13px;
        padding-right: 24px;
      }
    }
  }
}

.headerBar_navmenu {
  margin-left: 26px;
  margin-bottom: 28px;
  margin-top: 8px;

  /deep/ ul.el-menu {
    border-bottom: 0px;
  }
  /deep/ li.el-menu-item {
    height: 48px;
    font-size: 16px;
    padding: 0 10px;
  }
  /deep/ li.el-menu-item.is-active {
    font-size: 18px;
    font-weight: 700;
    border-bottom: 3.6px solid red;
  }
}

.album {
  margin-left: 26px;
  display: flex;
  margin-bottom: 36px;
  > .top50 {
    border-radius: 12px;
    width: 160px;
    height: 160px;
    background-image: radial-gradient(#6b646b, #81838f, #727380);
    position: relative;
    margin-right: 42px;
    > div {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 46px;
      font-weight: bold;
      color: white;
    }
    > .num {
      top: 54px;
      font-size: 70px;
    }
  }
  > .image {
    margin-right: 42px;
    /deep/ .el-image__inner {
      border-radius: 12px;
    }
    > .publishTime {
      font-size: 13px;
      color: #676767;
    }
  }
  > .musiclist {
    > .title {
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 16px;
      i {
        font-size: 22px;
        padding-left: 24px;
        position: relative;
        top: 1px;
      }
    }
    > .hot50 {
      height: 328px;
      overflow: hidden;
    }
    > ol {
      width: 660px;
      padding: 0;
      margin: 0;
      > li {
        list-style: none;
        display: flex;
        justify-content: space-between;
        padding: 6px 16px;
        .index {
          padding-right: 8px;
          color: #d2d2d3;
        }
        i {
          padding-right: 10px;
          color: #d2d2d3;
        }
        .time {
          padding-right: 18px;
          color: #969697;
        }
      }
      li:nth-child(odd) {
        background-color: #f3f1f1;
      }
      li:hover {
        background-color: #f8ab8d67;
      }
    }
    > .check {
      width: 628px;
      display: flex;
      justify-content: flex-end;
      background-color: #f3f1f1;
      color: #969697;
      padding: 4px 16px;
      > i {
        padding: 0 18px 0 12px;
        position: relative;
        top: 4px;
      }
    }
    > .check:hover {
      color: black;
    }
  }
}

.MV {
  margin: 0px 26px;
}

.desc {
  margin: 0px 26px;
  white-space: pre-wrap;
  line-height: 200%;
  color: #676767;
  h4 {
    color: black;
  }
}

.like {
  display: flex;
  flex-wrap: wrap;
  margin-left: 26px;
  > div {
    padding: 0px 12px 20px 12px;
    .el-image {
      border-radius: 6px;
      cursor: pointer;
    }
    > .name {
      font-size: 15px;
      padding-top: 4px;
      cursor: pointer;
    }
  }
}
</style>